大家好，歡迎來到第二十八天！在 Day 27，我們學習了 Cursor 的三大基本模式（Agent、Plan、Ask）。今天，我們要深入探討 Cursor 的進階功能，以及為什麼要使用 Figma MCP 來解決設計與開發之間的痛點。
在開發過程中，我們常常遇到這些問題：
Figma MCP 就是為了解決這些問題而生。
在 Day 27，我們學習了基本的三大模式。現在讓我們深入了解 Cursor 獨有的 @ 符號系統，這些功能是 VS Code 或其他編輯器完全沒有的。
| 符號 | 功能 | 實際應用 |
|---|---|---|
@Codebase |
理解整個專案並搜索 | 「@Codebase 專案中所有的錯誤處理模式是什麼？」 |
@Files & Folders |
引用特定檔案或資料夾 | 「@README.md」、「@features/auth/」 |
@Docs |
查詢技術文檔 | 「@Docs flutter routing 如何實作？」 |
@Web |
即時網路搜索 | 「@Web Flutter 3.19 有哪些新功能？」 |
@Git |
理解 Git 歷史和變更 | 「@Git activity_provider.dart 最近的變更記錄」 |
@URL |
讀取網頁或設計稿內容 | 「@https://figma.com/...」、「@https://...」 |
這些功能不只是簡單的搜索，而是真正理解程式碼的語意和上下文。
實戰範例 1：使用 @Codebase 理解專案模式
問題：「@Codebase 我們在 Crew Up 專案中如何處理非同步錯誤？」
Cursor 會：
1. 分析整個專案的錯誤處理模式
2. 找出 Result<T> 的使用方式
3. 解釋 AppException 的設計
4. 提供統一的實作建議
這比手動搜尋「error」、「exception」然後逐一檢查每個檔案快多了！
Cursor 不只是關鍵字搜索，而是理解你的意圖。
對比：
❌ 傳統搜索（VS Code）：
搜索關鍵字 "firebase auth error"
→ 找到所有包含這些字的地方，但不一定相關
✅ Cursor 自然語言搜索：
「我們在哪裡處理 Firebase 認證錯誤並轉換成 AppException？」
→ 直接找到 auth_remote_datasource.dart 中的錯誤處理邏輯
→ 理解為什麼要這樣設計
→ 提供改善建議
傳統開發流程的問題：
時間消耗：
Figma MCP 讓 Cursor 直接讀取 Figma 設計檔案：
@Figma-URL 直接讀取設計規格，不用切換視窗效率提升：2-3 倍，更重要的是工作流程更順暢
在 Crew Up 專案中，我們使用 Figma 本地 MCP Server，透過 Figma 桌面版來連接。
為什麼選擇本地 Server？
步驟 1：在 Figma 桌面版啟用 Local MCP Server
http://127.0.0.1:3845/mcp 執行步驟 2：在 Cursor 中設定 MCP Server
建立或編輯 MCP 設定檔：
# Mac/Linux
~/.cursor/mcp.json
# Windows
%USERPROFILE%\.cursor\mcp.json
加入 Figma Server 設定：
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}
重新啟動 Cursor 讓設定生效
⚠️ 重要提醒：
方法 1：檢查 MCP 設定檔
確認 ~/.cursor/mcp.json 包含正確的設定：
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/mcp"
}
}
}
方法 2：在 Cursor 中測試連接
在 Cursor 中輸入：
@https://www.figma.com/design/YOUR_FILE_KEY/...?node-id=xxx
請告訴我這個元件的名稱和設計規格
✅ 成功的回應： Cursor 會返回具體的設計資訊（元件名稱、顏色、尺寸等）
❌ 失敗的回應： 返回空白內容或錯誤訊息
常見問題排查：
| 問題 | 可能原因 | 解決方式 |
|---|---|---|
| 返回空白內容 | 本地 Server 未執行 | ✅ 打開 Figma 桌面版✅ 確認已啟用 Local MCP Server |
| 無法連接 | Server 未啟動 | ✅ 重新啟動 Figma 桌面版✅ 檢查 Preferences 設定 |
| 權限錯誤 | 無 Figma 檔案存取權 | ✅ 確認您的 Figma 帳號有檔案權限 |
| 讀取失敗 | Styles 未發佈 | ✅ 在 Figma 中發佈 Color/Text Styles |
| Port 衝突 | 3845 port 被佔用 | ✅ 關閉其他使用該 port 的應用 |
💡 本地 Server 特別提醒：
從 Figma 中複製要使用的 Frame 或 Component 連結：
https://www.figma.com/design/YOUR_FILE_KEY/Project-Name?node-id=123-456
在 Cursor 中直接使用這個完整連結即可！
Figma MCP 的效果取決於設計稿的「結構化」程度。
設計師需要預先定義：
重要： 所有 Styles 必須「發佈」(Publish to Library) 才能被讀取！
在 Cursor 中輸入：
@https://www.figma.com/design/YOUR_FILE_KEY/Crew-Up?node-id=xxx
請告訴我 "Button/Primary" 元件的所有設計規格：
- 背景顏色、文字顏色、圓角、內距、高度、字體
Cursor 會回應：
根據 Figma 設計規格，Button/Primary 元件的設計如下：
• 背景顏色: #C64508 (Base/orange/700)
• 文字顏色: #FAFAFA (Base/neutral/50)
• 圓角: 8px
• 內距: 水平 16px, 垂直 12px
• 高度: 48px
• 字體: 16px, Bold (700), Line height 150%
我看到專案中已有完整的設計系統：
• AppColors.actionPrimary (對應 orange/700)
• AppColors.textLight (對應 neutral/50)
• AppTypography.buttonLarge (已設定 16px, Bold)
建議使用專案的設計系統實作：
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.actionPrimary, // 使用設計 Token
foregroundColor: AppColors.textLight, // 使用設計 Token
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppSpacing.xs), // 8.0
),
padding: EdgeInsets.symmetric(
horizontal: AppSpacing.m, // 16.0
vertical: AppSpacing.s, // 12.0
),
minimumSize: Size.fromHeight(48.0),
),
child: Text(
'立即加入',
style: AppTypography.buttonLarge, // 已包含正確的字體設定
),
onPressed: () {},
)
優點： AI 不只告訴你 Figma 的數值，還會自動對應到專案中已定義的設計 Token！
@https://www.figma.com/design/YOUR_FILE_KEY/...?node-id=xxx
@lib/features/home/presentation/widgets/activity_card_widget.dart
請參考 Figma 設計，檢查這個 Widget 是否符合規格，如有不符請修正。
AI 會自動比對 Figma 設計與程式碼差異，並提供修正建議。
@https://www.figma.com/design/YOUR_FILE_KEY/...
@Codebase @Folder lib/features/
請檢查 features 資料夾中所有的 UI 元件，
比對 Figma 設計，找出不一致的地方。
組合多個 @ 符號，一次完成複雜的檢查任務！
AI 可以「看到」設計稿，讓設計迭代不再痛苦，團隊更願意追求設計的完美。
適合使用 Figma MCP 的情境：
可以先不用 Figma MCP 的情境：
在實際整合 Cursor + Figma MCP 的過程中，有三個關鍵經驗值得分享：
1. 本地 MCP Server 需要先啟用
一開始測試時，我發現 Cursor 完全讀不到 Figma 設計，返回的都是空白內容。檢查了半天才發現：使用本地 MCP Server 時，需要在 Figma 桌面版中手動啟用！
修正方式：
關鍵提醒：
這是使用本地 Server 最容易忽略的設定！
2. 設計系統思維很重要
在我們的經驗中，如果設計師沒有 Design System 和 Library 的概念，Figma MCP 的效果會大打折扣。
為什麼？ 因為會出現大量沒有定義清楚的 Magic Number：
// 設計稿上看到的數值
padding: EdgeInsets.all(14.0) // 為什麼是 14？
fontSize: 15.5 // 為什麼是 15.5？
borderRadius: 9.0 // 為什麼是 9？
這些隨意的數值會讓：
我們的做法： 以「系統性」的方式解決問題：
Figma MCP 是放大器，不是魔法棒。 它能讓好的設計系統發揮更大價值，但無法修復沒有系統的混亂設計。
最大的啟發： Figma MCP 讓設計迭代變得不再痛苦，團隊更願意追求設計的完美，而不是為了省麻煩而妥協。
明天，我們將探討 Flutter 性能優化與監控，學習如何打造流暢的使用者體驗。
期待與您在 Day 29 相見！
iThome鐵人賽
看影片追技術
看更多